<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>标题页面</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div class="daohang" style="border: 1px;width: 300px;height: 30px;background-color: green;">
        <p class="zhuye">主页</p>
        <p class="xinwen">新闻</p>
        <p class="lianxi">联系</p>
        <p class="guanyu">关于</p>
    </div>
    <div style="border: 1px solid red ;height: 300px;width: 400px;overflow: scroll;">
        <p>滑动</p>
        <p>滑动</p>
        <p>滑动</p>
        <p>滑动</p>
        <p>滑动</p>
        <p>滑动</p>
        <p>滑动</p>
        <p>滑动</p>
        <p>滑动</p>
    </div>
    <div style="border: 1px solid red;height: 50px;width: 50px;float:right;"> </div>
    <a href="www.baidu.com" style="text-decoration: none;">百度</a>
    <p style="text-transform: uppercase;">This is some text. </p>
    <p style="text-transform: lowercase;">This is some text.</p>
    <p style="text-transform: capitalize;">This is come text.</p>
        <p style="text-indent: 10px;text-shadow: 5px 5px blue;">I am</p>
        <p style="letter-spacing: 5px;">设置字符间距</p>

    <p id="mystyle" style="color: aqua;">公共样式</p>
    <p id="pera1">2</p>
    <p class="pera1">1</p>
    <p style="color: brown;">内链样式</p>
    <p>背景图片</p>
    <style>
        #pera1{
            border: 1px solid red;
        }
        #pera1{
            background-color: blueviolet;
        }
    </style>
    <p class="change_color">看见了</p>
    <p>点吧：<a href="https://www.so.com/link?m=by6dk0hlWccKnMe9pyoltzqLI0zORiqAiHgsdnNvaQb5uThLTRMhufKMFsNM7Ur2hNFjyL51u9Jy3b8YiLXlCGCkuIgdQ6Ox7anUQegzBo7fLtN5H">blbl  </a></p>
    <style>
        .change_color{
            color :blue;
            /*增加边框 dotted 点状虚线     solid 实线    double 双线       dashed  虚线 */
            border: 1px dashed black;
            /*增加背景色*/
            background-color:greenyellow;
            /*文字居中 left左边 right 右边 justify 实现两端对称*/
            text-align: justify; 
            /*宽度*/
            width: 500px;    
            /*高度*/
            height: 500px;
            /*居中 外边距*/
            margin: 10px;
            /*圆形*/
            border-radius: 100px;
            /*字体大小*/
            font-size: 50px;
            /*内边距*/
            padding: 10px;
        }
        .change_color:hover{
            background:red;
            width: 400px;
            height: 300px;
            border: 100px double yellow;
            border-radius: 50% ;
            padding: 20px 10px 30px 20px;
        }
        .daohang:hover{
            background:greenyellow;
            width: 300px;
            height: 30px;

        }

</style>
</body>
</html>